<template>
    <div class='common-header'>
        <div class='common-header-left'>
            <span class='iconfont ico-menu'>
                &#xeaf1;
            </span>
        </div>
        <div class='common-header-center'>
            <router-link tag='p' to='/user'>我的</router-link>
            <router-link tag='p' to='/' class='tab-active'>发现</router-link>
            <p>排行</p>
            <p>视频</p>
        </div>
        <div class='common-header-right'>
            <span class='iconfont ico-search'>
                &#xe60e;
            </span>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'common-header'
    }
</script>

<style lang='scss' scpoed>
    @import '../assets/scss/glo.scss';
    .common-header {
        height:1.5rem;
        @include flex(flex, row);
        background:#D83E34;

        & .iconfont {
            font-size:0.6rem;
            color:#fff;
        }
        .common-header-left {
            width:1.2rem;
            height:100%;
           
            @include verticalCenter(center, center);
        }

        .common-header-center {
            flex: 1;
             
            @include verticalCenter(center, center);

            p {
                color:#ccc;
                display:inline-block;
                margin:0 0.50rem 0 0.50rem;
                font-size:0.40rem;
            }

            .tab-active {
                color:#fff;
                font-weight:bold;
                font-size:0.44rem;
            }
        }

        .common-header-right {
            width:1.2rem;
            height:100%;
            
            @include verticalCenter(center, center);

            .ico-search {
                font-size: 0.52rem;
            }
        }
    }
</style>